<template>
    <div class="header">
        <div class="return"></div>
        <div class="titles">用水关爱</div>
        <div class="weather">
            <div :class="item.type == 0 ? 'item' : 'item item-line'" v-for="(item,index) in weather" :key="index">
                <div class="img"><img :src="item.icon" alt=""></div>
                <div class="txt">
                    <span v-if="item.type != 1">{{item.txt[0]}}</span>
                    <span v-if="item.type != 1">{{item.txt[1]}}</span>
                    <template v-if="item.type == 1">{{item.txt}}</template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headImg1 from '../../../assets/images/dy.png'
import headImg2 from '../../../assets/images/yt.png'
import headImg3 from '../../../assets/images/qt.png'
import headImg4 from '../../../assets/images/icon_dw.png'
export default {
    name: 'WaterHeader',
    data() {
        return {
            weather:[
                {type:0,txt:['今天','3~6℃'],icon:headImg1},
                {type:0,txt:['明天','0~3℃'],icon:headImg2},
                {type:0,txt:['后天','13~16℃'],icon:headImg3},
                {type:1,txt:'潍坊市',icon:headImg4}
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/style/index";
    .header{
        width: 7680px;
        height: 140px;
        position: relative;
        .return{
            width: 99px;
            height: 55px;
            float: left;
            margin: 18px 0 0 78px;
            @include bg-r
        }
        .titles{
            width:768px;
            height: 140px;
            color: $color;
            margin: 0 auto;
            font-size: 72px;
            text-align: center;
            letter-spacing: 3px;
            padding-top: 35px;
        }
    }
    .weather{
        z-index: 1;
        position: absolute;
        top: 0;
        right: 45px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 768px;
        height: 90px;
        .item{
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-weight: 700;
            .img{
                img{position: relative;top: -2px;max-height: 50px;}
            }
            .txt{
                padding-left: 15px;
                span{
                    display: block;
                    text-align: center;
                    &:first-child{font-size: 20px;color:$color-white2;}
                    &:last-child{font-size: 24px;margin-top: 12px;
                    @include txtBg(#02f7f8,#0590fe)}
                }
            }
        }
        .item-line{
            font-size: 30px;
            background: url(../../../assets/images/tqx.png) left center no-repeat;
            .txt{
                color: $color-white2;
            }
        }
    }
</style>